<template>
  <div class="indexBox">
    <myNav types="2" name="开发商"></myNav>
    <div class="home">
      <div class="two">
        <div>
          <contentTitle :myIndex="1"></contentTitle>
          <div class="module-bg myProgress">
            <div class="myEcharts" style="height: 60%">
              <useEcharts :echartsOption="echartsOption" v-if="echartsOption" @childEvent="useSelectPropertyProportion"></useEcharts>
            </div>
            <div class="table-footer">
              <myTable :tableArr="selectPropertyProportionData"></myTable>
            </div>
          </div>
        </div>
        <div>
          <contentTitle :myIndex="2"></contentTitle>
          <div class="module-bg myProgress">
            <div class="myProgress">
              <myProgress :parms="parms" :pageSize="5" :pageNumber="1" types="开发商"></myProgress>
            </div>
          </div>
        </div>
        <div class="relative">
          <contentTitle :myIndex="3"></contentTitle>
          <div class="myProgress module-bg">
            <bar :parms="selectCapitalInfoParms" @getCurrent="getCurrentFirst" :type="1"></bar>
          </div>
        </div>
        <div class="relative">
          <contentTitle :myIndex="4"></contentTitle>
          <div class="myProgress module-bg">
            <bar :parms="selectCurrencyInfoParms" @getCurrent="getCurrentLast" :type="2"></bar>
          </div>
        </div>
      </div>
      <div class="three">
        <div style="height: 100%">
          <contentTitle :myIndex="5"></contentTitle>
          <div class="myProgress myProgressz module-bg">
            <myList :useSelectCapitalInfoParms="useSelectCapitalInfoParms"></myList>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import myNav from "@/components/bjBuilding/header/index.vue";
import contentTitle from "@/components/bjBuilding/contentTitle/index.vue";
import myCharts from "@/components/bjBuilding/myCharts/index.vue";
import myTable from "@/components/bjBuilding/myTable/index.vue";
import myProgress from "@/components/bjBuilding/progress/index.vue";
import bar from "@/components/bjBuilding/bar/index.vue";
import myList from "@/components/bjBuilding/myList/index.vue";
import { selectCapitalInfo, selectPropertyProportion } from "@/api/bjBuilding";
import { onMounted, ref, reactive } from "vue";
import { xmsjtjqk1 } from "@/utils/echartsData";
import useEcharts from "@/components/bjBuilding/useEcharts/index.vue";

const selectCapitalInfoData = ref(null);
const data = ref(null);
const currentFirst = ref(null);
const currentLast = ref(null);
var pagesFirst;
var pagesLast;
const selectPropertyProportionData = ref(null);
//饼状图option
const echartsOption = ref(null);
// 开发商交付排名参数
const parms = reactive({
  cityName: "",
  level: 1, //1开发商 2项目
  sortField: 1, //1剩余交付 2交付率
  sortWay: 1, //1升序 2降序
});

// 开发商列表参数
const useSelectCapitalInfoParms = reactive({
  pageSize: 20,
  pageNumber: 1,
  sortField: 1, //1保交楼项目数 2贷款前正常施工项目 3贷款前停工项目 4网签备案率
  sortWay: 1, //1升序 2降序
});

// 开发商挪用预售资金排名
const selectCapitalInfoParms = reactive({
  level: 1, //1开发商 2项目
  pageSize: 5,
  pageNumber: 1,
});

// 开发商剩余项目货值排名
const selectCurrencyInfoParms = reactive({
  level: 1, //1开发商 2项目
  pageSize: 5,
  pageNumber: 1,
});
//

// 开发商所有质占比

const useSelectPropertyProportion = async () => {
  await selectPropertyProportion({}).then((res) => {
    if (res.code == 0) {
      selectPropertyProportionData.value = res.data;
      echartsOption.value = xmsjtjqk1(res.data);
    }
  });
};

onMounted(() => {
  useSelectPropertyProportion();
});

const someMethod = () => {
  return {
    selectCapitalInfoParms,
    echartsOption,
  };
};
</script>
<style scoped lang="less">
.paging {
  position: absolute;
  bottom: 10px;
  right: 25px;
  font-size: 20px;
  font-weight: 400;
  color: #6a84d9 !important;
}
.home {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/bjBuilding/bodybg.png");
  background-size: 100% 100%;
  display: grid;
  grid-gap: 28px 50px;
  grid-template-columns: 861px 858px;
  grid-template-rows: 900px;
  place-content: start center;
  // 隐藏滚动条
  overflow: hidden;
  div {
    color: #eee;
  }

  .top {
    grid-column: 1 / 4;
  }
  .two {
    display: grid;
    // grid-template-columns: 50% 50%;
    // grid-template-rows: 48% 48%;
    // grid-gap: 28px 100px;
    // grid-column-gap:15px;
  }
  .three {
    grid-column: 2 / 4;
  }

  .table-footer {
    // height: 25%;
    padding: 7% 5%;
    box-sizing: border-box;
  }
  .myProgress {
    height: 92%;
    width: 100%;
  }
  .myProgressz {
    height: 94.5% !important;
  }
}
::v-deep .el-pagination {
  bottom: 10px;
}
</style>
